<template>
	<view class="content">
		<view class="fillInfoView">
			<view class="cell b-b">
				<text class="tit">收货人</text>
				<input class="input" type="text" maxlength="10" @input="checkName" v-model="userInfo.name" placeholder="请输入收货人姓名" placeholder-class="placeholder" />
			</view>
			<view class="cell b-b">
				<text class="tit">手机号</text>
				<input class="input" type="number" maxlength="11" v-model="userInfo.mobile" placeholder="请输入收货人手机号码" placeholder-class="placeholder" />
			</view>
			<view class="cell b-b">
				<text class="tit">收货地址</text>
				<areaChoice @change="onChangeRegion"></areaChoice>
			</view>
			<view class="cell b-b">
				<text class="tit">详细地址</text>
				<input class="input" type="text" maxlength="120" v-model="userInfo.detailAddress" placeholder="请输入详细地址" placeholder-class="placeholder" />
			</view>
			<image class="bg" src="../../../static/image/shop/creatOrder/addr-line.png"></image>
		</view>
		<!-- 购买的商品展示 -->
		<view class="goodsCard">
			<image :src="goodsInfo.thumbnail"></image>
			<view class="gsC-Tv">
				<text class="gsC-tit">{{ goodsInfo.name }}</text>
				<text class="gsC-des">{{ goodsInfo.description }}</text>
				<text class="gsC-price">{{ goodsInfo.price }}爱豆</text>
				<!-- 数量 -->
				<text class="gsC-number">x{{ goodsInfo.quantity }}</text>
			</view>
		</view>
		<!-- 底部栏 -->
		<!-- <view class="bot-fill-view"></view> -->
		<view class="bottom">
			<view class="fill">
				<text class="tip">实付款：</text>
				<text class="price fill">{{ RealityPrice }} 爱豆</text>
			</view>
			<view class="btn" @click="SubmitOrder"><text>去支付</text></view>
		</view>
		<!-- popup -->
		<uni-popup ref="buyPopup" :mask-click="false" :safe-area="false" type="dialog">
			<view class="popup1">
				<image class="icon_content" src="../../../static/image/iconPopup/icon_shop.png"></image>
				<view class="flex-c">
					<text class="popup1Content">确认购买</text>
				</view>
				<view class="popup_bottomView">
					<view class="popup_bottomViewitem flex-c" style="border-radius:0 0 0 15px;" @click="cancelBuy()"><text style="color: #333333;">取消</text></view>
					<view class="popup_bottomViewitem flex-c" style="background-color: #0659C7;border-radius:0 0 15px 0;" @click="enterBuy()">
						<text style="color: #FFFFFF;">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import * as api from '@/api/login';
export default {
	data() {
		return {
			defaultValue: ['江苏省', '南京市', '鼓楼区'],
			userId:'',
			//用户的个人信息
			userInfo: {
				name: '',
				mobile: '',
				address: '',
				detailAddress: '',
			},
			RealityPrice: 0, //实付款
			goodsInfo: {} //商品信息
		};
	},
	onLoad(option) {
		console.log(option);
		this.userId = this.$store.state.userInfo.currentUser.userId;
		let goodsInfo = JSON.parse(option.goodsInfo);
		if (goodsInfo != null || goodsInfo != undefined) {
			this.goodsInfo = goodsInfo;
			this.RealityPrice = goodsInfo.price * goodsInfo.quantity;
		}
	},
	methods: {
		/**
		 * 确认选择省市区
		 * @param {Array(Object)} region 省市区数据
		 */
		onChangeRegion(region) {
			let that = this;
			if (region[0].name == region[1].name) {
				console.log('相等');
				that.userInfo.address = region[0].name + region[2].name;
				return;
			}
			that.userInfo.address = region[0].name + region[1].name + region[2].name;
			// console.log('选择的省市区数据：', region);
		},
		// 检查姓名的输入
		checkName: function(e) {
			var value = e.detail.value;
			if (!value || value == '') {
				return '';
			}
			const rule = /[^\u4E00-\u9FA5A-Za-z]+$/;
			this.$nextTick(function() {
				this.userInfo.name = value.replace(rule, '');
			});
		},
		// 去支付，请求商城订单
		SubmitOrder() {
			// 对输入的内容做非空判断
			let userInfo = this.userInfo;
			console.log(this.userInfo);
			if (userInfo.name == '') {
				this.showToast('请填写收货人姓名');
				return;
			} else if (this.$regular.checkName(userInfo.name)) {
				this.showToast('姓名只可以为汉字、字母');
				return;
			} else if (userInfo.mobile == '') {
				this.showToast('请填写手机号码!');
				return;
			} else if (!this.$regular.phoneReg.test(userInfo.mobile)) {
				this.showToast('请填写正确的手机号码!');
				return;
			} else if (userInfo.address == '') {
				this.showToast('请选择收货地址');
				return;
			} else if (userInfo.detailAddress.length < 2) {
				this.showToast('请填写详细地址');
				return;
			}
			this.$refs.buyPopup.open('center');
		},
		cancelBuy(){
			this.$refs.buyPopup.close();
		},
		// 确认购买
		enterBuy(){
			let address = this.userInfo.address + this.userInfo.detailAddress;
			let that = this;
			let data = {
				userId: that.userId,
				action: 'requestMallOrder',
				params: {
					userId: that.userId,
					goodsId: that.goodsInfo.id,
					quantity: that.goodsInfo.quantity,
					consigneeName: that.userInfo.name,
					consigneeAddress: address,
					consigneePhone: that.userInfo.mobile
				}
			};
			// 下订单 --节流
			that.$utils.throttle(() => {
				api.requestMallOrder(data).then(function(res) {
					console.log('requestMallOrder success', res);
					if (res.data.code == 2000) {
						uni.redirectTo({
							url: '../paySuccess/paySuccess'
						});
					} else if (res.data.code == 2001) {
						if (res.data.message == 'account not enough') {
							that.$toast('账户余额不足',{icon:'error'});
							that.$refs.buyPopup.close();
							return;
						}
					}
				}).catch(function(error) {
					console.log('requestMallOrder fail', error);
				});
			},2000)
		},
		// Toast
		showToast(content) {
			this.$toast(content, { icon: 'none' });
		}
	}
};
</script>

<style scoped lang="scss">
page {
	background-color: $uni-bg-color-grey;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.fillInfoView {
	margin-top: 24rpx;
	width: 702rpx;
	background-color: white;
	border-radius: 15rpx;
	padding-top: 10rpx;
	position: relative;
	box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
/* 填写个人信息区域 */
.cell {
	height: 106rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: auto 24rpx;
}
.placeholder {
	color: #999 !important;
}
.tit {
	min-width: 130rpx;
	font-size: 30rpx;
	color: #333;
}
.b-b {
	position: relative;
}
.b-b::after {
	position: absolute;
	z-index: 3;
	left: 0;
	top: auto;
	bottom: 0;
	right: 0;
	height: 0;
	content: '';
	transform: scaleY(0.5);
	border-bottom: 1px solid #e0e0e0;
}
.bg {
	position: absolute;
	left: 11rpx;
	bottom: 0;
	width: 680rpx;
	height: 4rpx;
}
/* 商品卡片区域 */
.goodsCard {
	margin-top: 30rpx;
	padding: 20rpx 0;
	width: 702rpx;
	background-color: white;
	border-radius: 15rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
.goodsCard image {
	flex-shrink: 0;
	width: 160rpx;
	height: 160rpx;
	margin: auto 20rpx;
	background-color: #f7f7f7;
	border-radius: 10rpx;
}
.gsC-Tv {
	margin-right: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
	position: relative;
}
.gsC-price {
	font-size: 34rpx;
	color: #ff536f;
	font-weight: 700;
}
.gsC-tit {
	margin-right: 20rpx;
	margin-bottom: 5rpx;
	font-size: 26rpx;
	color: #333;
}
.gsC-number {
	position: absolute;
	bottom: 0;
	right: 10rpx;
	font-size: 26rpx;
	color: #333;
}

.gsC-des {
	margin-bottom: 5rpx;
	font-size: 24rpx;
	color: #999;
}
/* 底部区域 */
.bot-fill-view {
	width: 100%;
	height: 100rpx;
	box-sizing: content-box;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	background-color: #555555;
}
.bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 90;
	width: 100%;
	height: 100rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.06);
	box-sizing: content-box;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	display: flex;
	flex-direction: row;
	align-items: center;
}
.tip {
	margin-left: 24rpx;
	font-size: 28rpx;
	color: #999;
}
.price {
	margin-right: 30rpx;
	font-size: 36rpx;
	color: $base-color;
	font-weight: 700;
	text-align: right;
}
.btn {
	min-width: 180rpx;
	height: 70rpx;
	padding: 0 26rpx;
	margin-right: 20rpx;
	border-radius: 100rpx;
	background-color: $base-color;
	font-size: 30rpx;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fill {
	flex: 1;
}
//
.flex-c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.popup1 {
	width: 620rpx;
	height: 750rpx;
	background-color: white;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.icon_content {
	margin-top: 93rpx;
	width: 238rpx;
	height: 238rpx;
}
.popup1Content {
	margin-top: 20rpx;
	font-size: 52rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
/* popup 底部两个按钮区域 */
.popup_bottomView {
	width: 100%;
	height: 137rpx;
	border-top: #333333;
	border-top: 1px solid #E6E6E6;
	border-radius: 0 0 15px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.popup_bottomViewitem {
	width: 50%;
	height: 100%;
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
}
.popupBottomView {
	margin-bottom: 0rpx;
	width: 100%;
	height: 120rpx;
	border-radius: 0 0 15px 15px;
	background-color: #0659c7;
}
.popupBottomView text {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #ffffff;
}
</style>
